<template>
  <div class="content-layout">
    <el-tabs
      v-model="editableTabsActive"
      type="card"
      class="demo-tabs"
      closable
      @tab-remove="removeTab"
      @tab-click="clickTab"
    >
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.path"
        :label="item.title"
        :name="item.path"
      >
      </el-tab-pane>
    </el-tabs>
    <!-- note：这里RouterView要放在外面，而不是v-for里面，否则onMounted会多次执行 -->
    <div class="tab-content">
      <RouterView />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { type TabItem, useTabsStore } from '@/stores/tabs'

const tabsStore = useTabsStore()
const router = useRouter()
const route = useRoute()
const editableTabsActive = ref('')
const editableTabs = computed(() => tabsStore.tabs)
// todo 这里可能刷新页面后默认就取了当前页面的，而不是第一个，

const setActiveTab = () => {
  editableTabsActive.value = route.path
}

const addTab = (route: any) => {
  const { path, meta } = route
  const tab: TabItem = { path, title: meta.title as string }
  tabsStore.addTab(tab)
}

watch(
  () => route.path,
  () => {
    setActiveTab()
    addTab(route)
  }
  , { immediate: true })


// 解决刷新页面后选项卡丢失问题
const beforeRefresh = () => {
  window.onbeforeunload = () => { // 刷新页面时执行
    tabsStore.persistentTabs() // 将tabsStore.tabs存储到sessionStorage中，刷新页面后会自动获取到
  }
  tabsStore.restoreTabs() // 刷新页面后会自动获取到sessionStorage中的tabsStore.tabs
}
// 为了解决默认打开的tab页面，即无法关闭的页面，是重定向的最终页面。
const findFinalRedirect = (routeObj: any): { path: string, title: string } => {
  if (!routeObj.redirect || !routeObj.children)
    return { path: routeObj.path, title: routeObj.meta?.title || '' }

  const redirectTarget = routeObj.children.find(
    (child: any) => child.path === routeObj.redirect
  )
  return redirectTarget ? findFinalRedirect(redirectTarget)
    : { path: routeObj.path, title: routeObj.meta?.title || '' }
}

onMounted(() => {
  // console.log('onMounted', route.path)
  beforeRefresh()

  const rootRoute = router.getRoutes().find((route) => {
    return route.path === '/'
  })
  const finalRoute = findFinalRedirect(rootRoute)
  console.log('最终重定向路径(默认不关闭的标签路径):', finalRoute)
  const tab: TabItem = { path: finalRoute.path, title: finalRoute.title as string }
  tabsStore.initDefultTab(tab)
})

const clickTab = (targetName: object) => {
  // console.log(targetName.paneName)
  router.push(targetName.paneName as string) // 路由跳转到对应的页面，刷新页面后会自动跳转到对应的页面，而不是停留在当前页面
}

const removeTab = (targetName: string) => {
  const active = tabsStore.removeTab(targetName)
  router.push(active) // 路由跳转到对应的页面，刷新页面后会自动跳转到对应的页面，而不是停留在当前页面
}
</script>

<style scoped>
.content-layout {
  min-height: 100%;
  width: 100%;
  /* display: flex; */

  margin: 0px 0px;
  background-color: #ffffff;
}

.tab-content {
  padding: 4px 16px;
  /* border: #000000 1px solid; */
  /* color: #6b778c; */
  /* font-size: 16px; */
  /* font-weight: 48; */
}
</style>